<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/cms/theme/include/taglib.jsp" %>
<html>
<head>
    <title>${site.name}&&${category.name}</title>
    <%@ include file="head.jsp" %>
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/3rd-lib/wangEditor/css/wangEditor.min.css">
    <link rel="stylesheet" href="${ctxStatic}/faq/css/faq.css"/>
</head>
<body>
<%@ include file="header.jsp" %>
<div class="am-container">
    <div class="content" id="content">
        <!-- 模块排版 -->
        <div class="am-g">
            <div class="am-u-sm-12" style="padding: 0px;">
                <div class="am-panel am-panel-default">
                    <div class="am-panel-bd">
                        <c:set var="question" value="${faq:getQuestion(param.id)}"></c:set>
                        <article class="am-article">
                            <div class="am-article-hd">
                                <h1 class="am-article-title" style="margin-bottom: 5px;">${question.title}</h1>
                                <p class="am-article-meta"><a href="#">${empty question.user.name?question.user.username:question.user.name}</a>
                                    发布于：<fmt:formatDate value="${question.createDate}" pattern="yyyy-MM-dd"/>
                                    浏览：${question.views}
                                </p>
                            </div>
                            <div class="am-article-bd">
                                ${question.content}
                            </div>
                        </article>
                    </div>

                    <div class="title"><span id="commentTitle">共0个回复</span></div>
                    <div class="am-panel-bd" id="commentHtml">

                    </div>
                    <div id="more" class="page-more"><a href="javascript:;">加载更多</a></div>
                    <!-- 回复框 -->
                    <div class="am-panel-bd" style="margin-right: 46px;">
                        <c:if test="${not empty user}">
                            <form id="answers" class="am-form am-form-horizontal" action="${ctx}/faq/answers/submit" data-am-validator method="post">
                                <input type="hidden" name="questionId" value="${param.id}">
                                <input type="hidden" name="device" value="${empty device?'web':device}"/>
                                <div class="am-form-group">
                                    <div class="am-u-sm-12" style="padding-left: 62px;">
                                        <textarea id="contentArea" name="content" rows="10" placeholder="我有最好的答案" minlength="1" required></textarea>
                                        <button type="button" id="save" class="am-btn am-btn-primary am-align-right" style="margin-top: 5px;">提交回复</button>
                                    </div>
                                </div>
                            </form>
                        </c:if>
                        <c:if test="${empty user}"><div class="notlogin"><a href="${ctx}/login">登录</a>后可回复</div></c:if>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%@ include file="footer.jsp" %>
<script src="${ctxStatic}/3rd-lib/tpl/tpl.js"></script>
<!-- 定义模板 -->
<script type="text/template" id="commentTpl" desc="评论模板">
    <ul class="am-comments-list am-comments-list-flip">
        <# for(var i=0; i<list.length; i++) {var item=list[i];#>
        <li id="<#=item.id #>" class="am-comment">
            <a href="#link-to-user-home"><img src="${ctxStatic}/custom/images/user.png" class="am-comment-avatar" width="48" height="48"></a>
            <div class="am-comment-main">
                <div class="am-comment-hd">
                    <div class="am-comment-meta"><a href="#link-to-user" class="am-comment-author"><# if(item.user.name!=null){#><#=item.user.name #><#}else{#><#=item.user.username #><#}#></a>
                        回复于 <#=new Date(item.createDate).format('yyyy-MM-dd h:m:s') #>
                    </div>
                </div>
                <div class="am-comment-bd"><p>
                    <p><#=item.content #></p>
                </div>
                <div class="am-comment-footer">
                    <div class="am-comment-actions">
                        <a href="javascript:;" title="支持" do="${rest}/up?channel=faq_comment&contentId=<#=item.id #>"><i class="am-icon-thumbs-up"></i><span><#=item.upCount#></span></a>
                        <a href="javascript:;" title="反对" do="${rest}/down?channel=faq_comment&contentId=<#=item.id #>"><i class="am-icon-thumbs-down"></i><span><#=item.downCount#></span></a>
                    </div>
                </div>
            </div>
        </li>
        <#}#>
    </ul>
</script>
<script type="text/javascript" src="${ctxStatic}/3rd-lib/wangEditor/js/wangEditor.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/custom/js/jq.editor.js"></script>
<script type="text/javascript">
    var pageNo = 0;//分页
    $(document).ready(function () {
        <c:if test="${not empty user}">
        //初始化编辑器
        $.fn.initEditor('${ctx}','${ctxStatic}','contentArea');
        </c:if>

        //加载回答列表
        var loadAnswers = function(isInit){
            get('${rest}/faq/answers/page?channel=faq_comment&questionId=${param.id}&pageNo='+pageNo,function(data){
                if(data.ret==1 && data.data.list){
                    if(data.data.hasLastPage){
                        //控制是否显示加载更多
                        $("#more").remove();
                    }
                    $("#commentTitle").html("共"+data.data.total+"条回复");
                    if(isInit){
                        $("#commentHtml").html(tpl('#commentTpl', data.data));
                    }else{
                        $("#commentHtml").append(tpl('#commentTpl', data.data));
                    }
                    //绑定操作
                    $(".am-comment-actions").on('click','a',function(){
                        var _this = $(this);
                        if(isLogin=='1'){
                            var url = _this.attr("do");
                            var doType = _this.attr("doType");
                            //普通操作
                            get(url,function(data){
                                if(data.ret==1){
                                    _this.find("span").html(data.data);
                                }
                            });
                        }else{
                            showMsg("未登录");
                        }
                    });
                }else{
                    if(isInit){
                        $("#commentHtml").html("暂无回复");
                    }else{
                        showMsg("没有了");
                    }
                    $("#more").remove();
                }
            });
        }
        loadAnswers(true);

        //提交文章
        $("form#answers").on('click','#save',function(){
            //验证
            if($("#contentArea").val()==''){
                showMsg("回答不能为空");
                return;
            }
            var _this = $(this);
            var _form = $("#answers");
            var answer = _form.serialize();
            post(_form.attr("action"),answer,function(data){
                if(data.ret==1){
                    showMsg("提交成功，请等待系统审核");
                    setTimeout(function(){location.reload();},200);
                }else{
                    showMsg("提交失败");
                }
            });
        });
    });
</script>
</body>
</html>